<template>
    <div class="star" :class="starType">
        <span v-for="(itemClass, index) in starClassArr" :class="itemClass" class="star-item" :key="index"></span>
    </div>
</template>

<script>
const STAR_LENGTH = 5
const STAR_HALF = 'half'
const STAR_OFF = 'off'
const STAR_ON = 'on'

export default {
    props: {
        size: {
            type: Number
        },
        score: {
            type: Number
        }
    },
    computed: {
        starType() {
            return 'star-' + this.size
        },
        starClassArr() {
            let starArr = []
            let score = Math.floor(this.score * 2) / 2
            let isDecimal = (score % 1) !== 0
            let integerNo = Math.floor(score)
            for (let i = 0; i < integerNo; i++) {
                starArr.push('star' + this.size + '_' + STAR_ON)
            }
            if (isDecimal) {
                starArr.push('star' + this.size + '_' + STAR_HALF)
            }
            while (starArr.length < STAR_LENGTH) {
                starArr.push('star' + this.size + '_' + STAR_OFF)
            }
            return starArr
        }
    }
}
</script>

<style lang="less">
    .star {
        display: inline-block;
        .star-item {
            display: inline-block;
            background-repeat: no-repeat;
        }
        &.star-48 {
            .star-item {
                background-size: 20px 20px;
                width: 20px;
                height: 20px;
                margin-right: 20px;
                &:last-child {
                    margin-right: 0
                }
            }
            .star48_on {
                background-image: url("../../assets/resource/img/star48_on@3x.png");
            }
            .star48_half {
                background-image: url("../../assets/resource/img/star48_half@3x.png")
            }
            .star48_off {
                background-image: url("../../assets/resource/img/star48_off@3x.png")
            }
        }
        &.star-36 {
            .star-item {
                background-size: 15px 15px;
                width: 15px;
                height: 15px;
                margin-right: 6px;
                &:last-child {
                    margin-right: 0
                }
            }
            .star36_on {
                background-image: url("../../assets/resource/img/star36_on@3x.png");
            }
            .star36_half {
                background-image: url("../../assets/resource/img/star36_half@3x.png")
            }
            .star36_off {
                background-image: url("../../assets/resource/img/star36_off@3x.png")
            }
        }
        &.star-24 {
            .star-item {
                background-size: 10px 10px;
                width: 10px;
                height: 10px;
                margin-right: 3px;
                &:last-child {
                    margin-right: 0
                }
            }
            .star24_on {
                background-image: url("../../assets/resource/img/star24_on@3x.png");
            }
            .star24_half {
                background-image: url("../../assets/resource/img/star24_half@3x.png")
            }
            .star24_off {
                background-image: url("../../assets/resource/img/star24_off@3x.png")
            }
        }
    }
</style>
